*, *:before, *:after{box-sizing: border-box;margin: 0;padding: 0;}
html, body{font-size: 62.5%;height: 100%;overflow: hidden;}
body{background: #DDD;}
svg{display: block;overflow: visible;}
.slider-container{position: relative;height: 100%;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: all-scroll;}
.slider-control{z-index: 2;position: absolute;top: 0;width: 12%;height: 100%;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;will-change: opacity;opacity: 0;}
.slider-control.inactive:hover{cursor: auto;}
.slider-control:not(.inactive):hover{opacity: 1;cursor: pointer;}
.slider-control.left{left: 0;background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);}
.slider-control.right{right: 0;background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);}
.slider-pagi{position: absolute;z-index: 3;left: 50%;bottom: 2rem;-webkit-transform: translateX(-50%);transform: translateX(-50%);font-size: 0;list-style-type: none;}
.slider-pagi__elem{position: relative;display: inline-block;vertical-align: top;width: 2rem;height: 2rem;margin: 0 0.5rem;border-radius: 50%;border: 2px solid #fff;cursor: pointer;}
.slider-pagi__elem:before{content: "";position: absolute;left: 50%;top: 50%;width: 1.2rem;height: 1.2rem;background: #fff;border-radius: 50%;-webkit-transition: -webkit-transform 0.3s;transition: -webkit-transform 0.3s;transition: transform 0.3s;transition: transform 0.3s, -webkit-transform 0.3s;-webkit-transform: translate(-50%, -50%) scale(0);transform: translate(-50%, -50%) scale(0);}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before{-webkit-transform: translate(-50%, -50%) scale(1);transform: translate(-50%, -50%) scale(1);}
.slider{z-index: 1;position: relative;height: 100%;}
.slider.animating{-webkit-transition: -webkit-transform 0.5s;transition: -webkit-transform 0.5s;transition: transform 0.5s;transition: transform 0.5s, -webkit-transform 0.5s;will-change: transform;}
.slider.animating .slide__bg{-webkit-transition: -webkit-transform 0.5s;transition: -webkit-transform 0.5s;transition: transform 0.5s;transition: transform 0.5s, -webkit-transform 0.5s;will-change: transform;}
.slide{position: absolute;top: 0;width: 100%;height: 100%;overflow: hidden;}
.slide.active .slide__overlay,
.slide.active .slide__text{opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
.slide__bg{position: absolute;top: 0;left: -50%;width: 100%;height: 100%;background-size: cover;will-change: transform;}
.slide:nth-child(1){left: 0;}
.slide:nth-child(1) .slide__bg{left: 0;background-image: url("../img/1.jpg");}
.slide:nth-child(1) .slide__overlay-path{fill: #d7eefa;}
@media (max-width: 991px){.slide:nth-child(1) .slide__text{background-color: rgba(233, 156, 126, 0.8);}}
.slide:nth-child(2){left: 100%;}
.slide:nth-child(2) .slide__bg{left: -50%;background-image: url("../img/2.jpg");}
.slide:nth-child(2) .slide__overlay-path{fill: #e1ccae;}
@media (max-width: 991px){.slide:nth-child(2) .slide__text{background-color: rgba(225, 204, 174, 0.8);}}
.slide:nth-child(3){left: 200%;}
.slide:nth-child(3) .slide__bg{left: -100%;background-image: url("../img/3.jpg");}
.slide:nth-child(3) .slide__overlay-path{fill: #adc5cd;}
@media (max-width: 991px){.slide:nth-child(3) .slide__text{background-color: rgba(173, 197, 205, 0.8);}}
.slide:nth-child(4){left: 300%;}
.slide:nth-child(4) .slide__bg{left: -150%;background-image: url("../img/4.jpg");}
.slide:nth-child(4) .slide__overlay-path{fill: #cbc6c3;}
@media (max-width: 991px){.slide:nth-child(4) .slide__text{background-color: rgba(203, 198, 195, 0.8);}}
.slide__content{position: absolute;top: 0;left: 0;width: 100%;height: 100%; background:url(t.jpg) center}
.slide__overlay{position: absolute;bottom: 0;  left: 0;height: 100%;min-height: 810px;-webkit-transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;will-change: transform, opacity;-webkit-transform: translate3d(-20%, 0, 0);transform: translate3d(-20%, 0, 0);opacity: 0;}
@media (max-width: 991px){.slide__overlay{display: none;}}
.slide__overlay path{opacity: 0.8;}
.slide__text{position: absolute;width: 25%;bottom: 15%;left: 12%;color: #fff;-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;will-change: transform, opacity;-webkit-transform: translateY(-50%);transform: translateY(-50%);opacity: 0;}
@media (max-width: 991px){.slide__text{left: 0;bottom: 0;width: 100%;height: 20rem;text-align: center;-webkit-transform: translateY(50%);transform: translateY(50%);-webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;padding: 0 1rem;}}
.slide__text-heading{font-family: "Microsoft YaHei" ! important;font-size: 4rem;margin-bottom: 2rem;}
@media (max-width: 991px){.slide__text-heading{line-height: 20rem;font-size: 3.5rem;}}
.slide__text-desc{font-family: "Microsoft YaHei" ! important;font-size: 15px; line-height: 26px; margin-bottom: 1.5rem;}
@media (max-width: 991px){.slide__text-desc{display: none;}}
.slide__text-link{z-index: 5;display: inline-block;position: relative;padding: 0 0.5rem;cursor: pointer;font-family: "Microsoft YaHei" ! important;font-size: 2.3rem;-webkit-perspective: 1000px;perspective: 1000px;}
@media (max-width: 991px){.slide__text-link{display: none;}}
.slide__text-link:before{z-index: -1;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform: rotateX(-85deg);transform: rotateX(-85deg);-webkit-transition: -webkit-transform 0.3s;transition: -webkit-transform 0.3s;transition: transform 0.3s;transition: transform 0.3s, -webkit-transform 0.3s;will-change: transform;}
.slide__text-link:hover:before{-webkit-transform: rotateX(0);transform: rotateX(0);}
a.slide__text-link {border-left: solid 2px #000; color: #000000;}